<template>
    <div>
        用户手机号：
        <Input v-model="searchData.mobile" style="width: 150px"></Input>
        订单类型：
        <Select v-model="searchData.order_type" style="width: 110px">
            <Option :value="0">陪驾订单</Option>
            <Option :value="1">验车订单</Option>
            <Option :value="2">学车订单</Option>
        </Select>
        订单状态：
        <Select v-model="searchData.order_status" style="width: 110px">
            <Option :value="0">未完成</Option>
            <Option :value="1">已完成</Option>
            <Option :value="-1">已取消</Option>
        </Select>
        下单时间：
        <Date-picker type="datetimerange" placeholder="开始日期" v-model="searchData.create_time"></Date-picker>
        预约时间：
        <Date-picker type="datetimerange" placeholder="开始日期" v-model="searchData.reserve_time"></Date-picker>
        <Button @click="search" type="primary" style="margin-left: 10px;">搜索</Button>
        <Button @click="reset" type="success" style="margin-left: 10px;">重置</Button>
        <br>
        <br>
        <Table :columns="columns" :data="list" border size="small">
        </Table>
        <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize" :current="searchData.page">
        </Paginate>
    </div>
</template>

<script>
import Paginate from "_c/paginate";
export default {
    name: "userOrder",
    components: {
        Paginate
    },
    data() {
        return {
            // 列表
            columns: [
                {
                    title: '手机号',
                    align: "center",
                    key: 'mobile',
                },
                {
                    title: '订单类型',
                    align: "center",
                    render: (h, param) => {
                        let txt = '';
                        if (param.row.order_type == 0) {
                            txt = '陪驾订单';
                        } else if (param.row.order_type == 1) {
                            txt = '验车订单';
                        } else {
                            txt = '学车订单';
                        }
                        return h('div', txt);
                    },
                },
                {
                    title: '接单教练',
                    align: "center",
                    key: 'order_sn',
                },
                {
                    title: '订单状态',
                    align: "center",
                    render: (h, param) => {
                        let txt = '';
                        if (param.row.order_status == 0) {
                            txt = '服务中';
                        } else if (param.row.order_status == -1) {
                            txt = '已取消';
                        } else {
                            txt = '已完成';
                        }
                        return h('div', txt);
                    },
                },
                {
                    title: '下单时间',
                    align: "center",
                    key: 'create_time',
                },
                {
                    title: '预约时间',
                    align: "center",
                    key: 'reserve_time_txt',
                },
            ],
            // 数据
            list: [],
            total: 0,
            searchData: {
                page: 1,
                limit: 10,
            },
        }
    },
    methods: {

        getList() {
            this.$axios('/admin/order/getList', this.searchData).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        search() {
            this.searchData.page = 1;
            this.getList();
        },

        reset() {
            this.searchData = {
                page: 1,
                limit: 10,
            }
            this.getList();
        },

        changePage(page) {
            this.searchData.page = page;
            this.getList();
        },

        changeSize(size) {
            this.searchData.limit = size;
            this.getList();
        },
        customSort(column, key, order) {
            this.searchData.order_by = column.key;
            this.searchData.sort = column.order;
            this.getList();
        },

    },
    created() {
        this.getList();
        window.onkeydown = (res) => {
            if (res.key == 'Enter') {
                this.getList();
            }
        }
    },
    beforeDestroy() {
        window.onkeydown = ''
    }
}
</script>